<template>
  <div class="pageBox">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <div class="topBox">
        <div class="leftBox">
          <div class="title">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div style="height: 30px; line-height: 40px">
                <img
                  style="width: 20px; height: 20px; margin-right: 8px"
                  src="../../../assets/img/iconImgs/peibian.png"
                  alt=""
                />
              </div>
              <div>配变信息 {{ timeDate }}</div>
            </div>
            <div>
              <img
                style="width: 16px; height: 16px"
                src="../../../assets/img/iconImgs/zhedie.png"
                alt=""
              />
            </div>
          </div>
          <div>
            <el-form
              :model="formInline"
              label-width="100px"
              :label-position="`right`"
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="所属地市">
                    <el-input
                      size="mini"
                      v-model="formInline.orgname03"
                      placeholder="国网南京供电公司"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="运维单位">
                    <el-input
                      size="mini"
                      v-model="formInline.lineName"
                      placeholder="国网江宁区供电公司"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="变电站名称">
                    <el-input
                      size="mini"
                      v-model="formInline.sname"
                      placeholder="110kw花塘变"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="线路名称">
                    <el-input
                      size="mini"
                      v-model="formInline.fname"
                      placeholder="110kw石坝163线"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="配变名称">
                    <el-input
                      size="mini"
                      v-model="formInline.pblx"
                      placeholder="石坝庙站"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="台区编号">
                    <el-input
                      size="mini"
                      v-model="formInline.aid"
                      placeholder="0190000190062"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="投运日期">
                    <el-input
                      size="mini"
                      v-model="formInline.Run_state_time"
                      placeholder="2011-01-19 00:00:00.0"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="rightBox">
          <div class="title">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div style="height: 30px; line-height: 40px">
                <img
                  style="width: 18px; height: 18px; margin-right: 3px"
                  src="../../../assets/img/iconImgs/rili.png"
                  alt=""
                />
              </div>
              <div>数据日历质量</div>
            </div>
            <div class="standard">
              <div>综合得分&gt;= 80</div>
              <div>20&lt;= 综合得分&lt;80</div>
              <div>综合得分&lt;20</div>
            </div>
          </div>
          <div>
            <el-calendar v-model="value">
              <template slot="dateCell" slot-scope="{ date, data }">
                <div class="calendarItemSlot">
                  <div class="">
                    {{ getCurrentData(data).day }}
                  </div>
                  <div
                    style="color: #ccc"
                    class=""
                    v-if="getCurrentData(data).score"
                  >
                    {{ getCurrentData(data).score }}
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
      </div>
      <div class="tabBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="量测曲线" name="first">
            <liangcePage></liangcePage>
          </el-tab-pane>
          <el-tab-pane label="终端投递记录" name="second">
            <terminalOption></terminalOption>
          </el-tab-pane>
          <el-tab-pane label="停电告警" name="third">
            <tableOption></tableOption>
          </el-tab-pane>
          <el-tab-pane label="进行告警" name="fourth">
            <runningAlarm></runningAlarm>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import liangcePage from "./liangcePage.vue";
import tableOption from "./tableOption.vue";
import terminalOption from "./terminalOption.vue";
import runningAlarm from "./runningAlarm.vue";
// import getPbInfo from "@/api/peibianForm.js";
import peibianForm from "../../../jsonData/peibianForm.json";
export default {
  components: {
    liangcePage,
    tableOption,
    terminalOption,
    runningAlarm,
  },
  data() {
    return {
      dialogVisible: false,
      jsonData:{
        term_esn:"",
        orgname03:"",
        sname:"",
        fname:"",
        trname:"",
        aid:"",
        run_state_tim:""
      },
      formInline: {
        orgname03: "", // 所属地市
        lineName: "", // 运维单位
        sname: "", // 变电站名称
        fname:"",
        pblx:"",
        aid:"",
        areaCode: "", // 台区编号
        Run_state_time: "", // 投运日期
      },
      value1: "",
      value: "",
      options: [
        {
          text: "选项1",
          value: 1,
        },
        {
          text: "选项2",
          value: 2,
        },
        {
          text: "选项3",
          value: 3,
        },
      ],
      scorePart1: "",
      scorePart2: "",
      lineOption: {
        yName: "",
        sName: "",
        xLabels: [],
        sData: [],
      },
      activeName: "first",
      timeDate: "2025-01-22",
    };
  },
  watch: {
    value(v) {
      this.handleDateChange(v);
    },
  },
  created() {
    this.initializeForm();
  },
  methods: {
    initializeForm() {
      if (peibianForm && peibianForm.value && peibianForm.value.length > 0) {
        console.log('★★★★★ 09:41:20 —— ',peibianForm )
        const firstRecord = peibianForm.value[0];
        this.formInline = {
          orgname03: firstRecord.orgname03 || "", // 所属地市
          lineName: firstRecord.lineName || "", // 运维单位
          sname: firstRecord.sname || "", // 变电站名称
          fname: firstRecord.fname || "", // 台区编号
          pblx: firstRecord.pblx || "", // 投运日期
          aid: firstRecord.aid || "", 
          areaCode: firstRecord.areaCode || "", 
          Run_state_time: firstRecord.Run_state_time || "", 
        };
      }
    },
    isShow() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getCurrentData(data) {
      const score = [
        {
          time: "2025-01-01",
          score: 85,
        },
        {
          time: "2025-01-02",
          score: 85,
        },
        {
          time: "2025-01-03",
          score: 85,
        },
        {
          time: "2025-01-04",
          score: 85,
        },
        {
          time: "2025-01-05",
          score: 85,
        },
        {
          time: "2025-01-06",
          score: 85,
        },
        {
          time: "2025-01-07",
          score: 65,
        },
        {
          time: "2025-01-08",
          score: 100,
        },
        {
          time: "2025-01-09",
          score: 25,
        },
        {
          time: "2025-01-10",
          score: 5,
        },
        {
          time: "2025-01-11",
          score: 85,
        },
        {
          time: "2025-01-12",
          score: 80,
        },
      ];
      const arr = data.day.split("-");
      const obj = score.find((x) => x.time === data.day);
      return {
        day: Number(arr[arr.length - 1]),
        score: obj && obj.score,
      };
    },
    handleClick(row) {
      console.log(row);
    },
    handleDateChange(value) {
      console.log("★★★★★ 13:34:06 —— 111", 111);
      console.log("★★★★★ 12:54:53 —— ", value);
      // 原始日期时间字符串
      const dateString = value;
      // 创建 Date 对象
      const date = new Date(dateString);
      // 获取年份、月份和日期
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1
      const day = String(date.getDate()).padStart(2, "0");
      // 格式化为 xxxx-xx-xx
      const formattedDate = `${year}-${month}-${day}`;
      this.timeDate = formattedDate;
      console.log(formattedDate); // 输出: 2025-01-17
    },
    // 请求表单
    getFormData() {
      let parmas = this.jsonData;
      getPbInfo(parmas).then((res) => {
        if (res.code===1) {
          this.formInline = res.value;
          this.total=res.total
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table th {
  background-color: #118b7d !important;
  color: white !important; /* Optional: Change text color to white for better contrast */
}
.main-content[data-v-567ae6d4],
.page[data-v-567ae6d4] {
  background-color: rgb(16, 190, 190) !important;
}
.pageBox {
  background: #fff;
}
.topBox {
  width: 100%;
  // height: 260px;
  display: flex;
  justify-content: space-between;
  .leftBox {
    width: 60%;
    padding: 1.5%;
    .title {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      margin: 0px 10px 10px 0px;
      border-bottom: 1px solid #f7f7f7;
    }
  }
  .rightBox {
    width: 40%;
    padding: 1.5% 0;
    padding-bottom: 0;
    .title {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
      margin: 0px 10px 10px 0px;
      border-bottom: 1px solid #f7f7f7;
    }
    .standard {
      display: flex;
    }
  }
}
.tabBox {
  padding: 15px;
}
::v-deeps.el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  padding: 8px;
  height: 20px;
}
::v-deep.el-calendar-table tr td:first-child {
  border: none;
}
::v-deep.el-calendar-table tr td:first-child {
  border: none;
}
::v-deep.el-calendar-table td {
  border: none;
}
.custom-date-cell {
  position: relative;
  height: 40px; /* 根据需要调整 */
}
.custom-date-cell .score {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 12px; /* 根据需要调整 */
  color: red; /* 根据需要调整 */
}
::v-deep.el-form-item__label {
  font-size: 14px !important;
}
</style>

<style lang="scss">
.calendarItemSlot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.el-calendar .el-calendar__body .el-calendar-day {
  box-sizing: border-box;
  padding: 0;
  display: flex;
  // align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 10px;
}
.el-calendar-table thead th {
  height: 26px;
  line-height: 26px;
  padding: 0;
}
.el-calendar__body {
  padding: 0;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #118b7d!important;
    color: #FFF;
}
::v-deep.el-pager li.active {
    color: #118b7d!important;
    cursor: default;
}
::v-deep.el-pager li.hover {
    color: #118b7d!important;
    cursor: default;
}
::v-deep.el-tabs__active-bar {
  background-color: #118b7d !important;
}
</style>
